<template>
    <div class="pager-table">

        <slot name="operation">

        </slot>
        <Table ref="table" class="table" size="small" :highlight-row="selectable && !isCheckbox" :columns="titleData" :data="data" :loading="loading"
               @on-current-change="currentChange"
               @on-selection-change="selectionChange"
               @on-sort-change="onSort">

            <div slot="footer">
                <div v-if="selectable && multiSelect != 'disabled'" class="showCheckbox">
                    多选
                    <Switch size="small" @on-change="checkboxSwitch" :value="isCheckbox"></Switch>
                </div>

                <Page v-if="!single" class="pager"
                     :total="totalCount" :current="no" :page-size="size" :page-size-opts="[10,20,30,50]"
                     show-sizer show-total size="small"
                     @on-change="pagerChange" @on-page-size-change="sizeChange">
                    <div></div>
                </Page>
                <div class="viewRecord">{{viewRecord}}</div>
            </div>
        </Table>

    </div>
</template>

<script>

    export default {
        name: 'PagerTable',
        data() {
            // this.alertJson(this.multiSelect)
            return {
                loading: false,
                // isCheckbox: this.checkbox,
                isCheckbox: this.selectable && this.multiSelect == 'true',
                // data: [],
                selectedRows: [],
                showLoading: false,
                size: 10,
                no: 1,
                totalCount: 0,
                orderBy: "",
                sort: ""
            }
        },
        props: {
            // checkbox: Boolean,
            titles: Array,
            data: {
              type: Array,
              default: []
            },
            url: {
                type: String,
                default: ""
            },
            selectable: {
              type: Boolean,
              default: true
            },
            multiSelect: {
              type: String,
              default: 'false' //true: 默认多选，false: 默认单选，disabled: 禁用多选
            },
            //是否分页
            single: {
                type: Boolean,
                default: false
            },
            params: {
                type: Object,
                default: null
            },
            paramsName: String
        },
        computed: {
            titleData() {
                var t = this.titles;
                if (this.isCheckbox) {
                    t =  [{
                        type: 'selection',
                        width: 35,
                        align: 'center'
                    }].concat(this.titles);
                }
                return t;
            },
            viewRecord() {
                if (this.single) {
                    return "当前 1 - " + this.data.length + " / 共 " + this.data.length + " 条"
                }
                var start = this.size * (this.no - 1) + 1;
                var end = start + this.size - 1;
                if (end > this.totalCount) {
                    end = this.totalCount;
                }
                return "当前 " + start + " - " + end + " / 共 " + this.totalCount + " 条"
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                if (!this.url) {
                    return;
                }
                this.loading = true;
                var p = {};
                var pName = this.paramsName;
                if (pName) {
                    p[pName] = JSON.stringify(this.params);
                } else {
                    // p = this.params;
                    for (var key in this.params) {
                        var v = this.params[key];
                        p[key] = typeof v == 'object' ? JSON.stringify(v) : v;
                    }
                }
                if (!this.single) {
                    p.no = this.no;
                    p.size = this.size;
                    p.orderBy = this.orderBy;
                    p.sort = this.sort;
                }
                ajax.get(this.url, p, (res) => {
                    if (!this.single) {
                        this.totalCount = res.page.totalCount;
                    }
                    // this.data = res.data;
                    // this.alertJson(res.data)
                    this.data.clear();
                    this.data.pushAll(res.data);
                    this.loading = false;
                }, () => {
                    this.loading = false;
                })

            },
            pagerChange(no) {
                this.no = no;
                this.loadData();
            },
            sizeChange(size) {
                this.size = size;
                if (this.no == 1) {
                    this.loadData();
                }
            },
            //{ column: {…}, key: "age", order: "asc" }
            onSort(data) {
                this.orderBy = data.key;
                this.sort = data.order;
                this.loadData();
            },
            currentChange(row) {
                this.selectedRows = [row];
                this.$emit("selectedRows", this.selectedRows);
            },
            selectionChange(rows) {
                this.selectedRows = rows;
                this.$emit("selectedRows", rows);
            },
            checkboxSwitch(val) {
                this.isCheckbox = val;
                if (val) {
                    this.$refs.table.clearCurrentRow();
                } else {
                    this.$refs.table.selectAll(false);
                }
                this.$emit("selectedRows", []);
            },
            deleteSelectedRows(rows) {
                rows = rows || this.selectedRows;
                for (var i = rows.length-1; i >= 0; i--) {
                    var index = this.data.indexOfJson(rows[i]);
                    var selectedRowsIndex = this.selectedRows.indexOfJson(rows[i]);
                    this.selectedRows.remove(selectedRowsIndex);
                    this.data.remove(index);
                }
                // this.selectedRows = [];
                // this.$emit("selectedRows", this.selectedRows);
            }
        },
        watch: {
            params: {
                handler(val, oldVal) {
                    console.log(val);
                    this.loadData();
                },
                deep:true
            },
            data: {
                handler(val, oldVal) {
                    // console.log(val);
                    this.$emit("selectedRows", this.selectedRows);
                    // this.alertJson(this.selectedRows)
                },
                deep:true
            }
        }

    }
</script>

<style scoped>
    .pager {
        float: right;
    }
    .table {
      margin-bottom: 15px;
    }
    .showCheckbox {
        display: inline-block;
        float: left;
        margin-left: 10px;
    }
    .viewRecord {
        display: inline-block;
        float: right;
        margin-right: 10px;
    }


</style>